<template>
  <div class="resourceSharing">
    <div class="top_img" :style="'background-image: url(' + topBg + ')'">
      <span>资 源 共 享</span>
    </div>
    <div class="main">
      <div class="col_title">
        {{ initData.title }}
      </div>
      <div class="col_time">
        {{ initData.createdBy }}
        {{
          $moment(parseInt(initData.createdAt)).format("YYYY-MM-DD HH:mm:ss")
        }}
      </div>
      <div
        class="video_box tc"
        v-if="getFileFormatFromPath(initData.datumNameUrl) == 'mp4'"
      >
        <video
          autoplay
          controls
          loop
          muted="false"
          :src="initData.datumNameUrl"
        ></video>
      </div>

      <div class="video_box" v-else>
        <el-button
          type="text"
          @click.stop="clickDownload(initData.datumNameUrl)"
        >
          点击下载保存 {{ extractFileNameFromUrl(initData.datumNameUrl) }}
        </el-button>
      </div>
      <div class="col_com">
        <div class="com_box">
          <div class="com_text">评论：</div>
          <el-input
            type="textarea"
            placeholder="请输入内容"
            :rows="5"
            v-model="commentText"
          >
          </el-input>
          <div class="btn">
            <el-button type="primary" @click="getAddComment">
              发布评论
            </el-button>
          </div>
        </div>

        <div class="com_box" v-if="commentList.length != 0">
          <div class="com_text">评论列表：</div>
          <div class="com_main">
            <ul>
              <li v-for="(e, i) in commentList" :key="i">
                <div class="left">
                  <div class="img_box">
                    <img :src="e.userImages" width="100%" alt="" />
                  </div>
                  <div class="name_box">
                    {{ e.userName }}
                  </div>
                  <div class="time_box">
                    {{ $moment(parseInt(e.createdAt)).format("YYYY-MM-DD") }}
                  </div>
                </div>
                <div class="right">
                  <!-- <div class="content_box"></div> -->
                  <div class="one_com">
                    {{ e.comment }}
                  </div>
                  <div class="one_btn">
                    <span
                      @click="clickOneCom(e)"
                      v-if="e.commentDtls.length == 0"
                      >回复</span
                    >
                    <div class="com_text_box" v-show="isOneId == e.id">
                      <el-input
                        type="textarea"
                        placeholder="请输入内容"
                        :rows="2"
                        v-model="oneCommentText"
                      >
                      </el-input>
                      <div class="btn">
                        <el-button type="primary" @click="getAddOneComment(e)">
                          发布评论
                        </el-button>
                      </div>
                    </div>
                  </div>
                  <ul v-if="e.commentDtls.length != 0">
                    <li v-for="(eA, iA) in e.commentDtls" :key="iA">
                      <div class="text_box">
                        <div class="img_box">
                          <img :src="eA.userImages" width="100%" alt="" />
                        </div>
                        <div class="name_box">
                          {{ eA.userName }}
                        </div>
                        <div class="content_box">
                          {{ eA.comment }}
                        </div>
                      </div>
                      <div class="time_box">
                        {{
                          $moment(parseInt(eA.createdAt)).format("YYYY-MM-DD")
                        }}
                        <span @click="clickTowCom(eA)">回复</span>
                      </div>
                      <div class="com_text_box" v-show="isTowId == eA.id">
                        <el-input
                          type="textarea"
                          placeholder="请输入内容"
                          :rows="2"
                          v-model="towCommentText"
                        >
                        </el-input>
                        <div class="btn">
                          <el-button
                            type="primary"
                            @click="getAddTowComment(e)"
                          >
                            发布评论
                          </el-button>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getByIdLearnDatum } from "@/util/learnDatum.js";
import { getByIdCommentList, getAddComment } from "@/util/comment.js";
import { getAddcommentDtl } from "@/util/commentDtl.js";

export default {
  data() {
    return {
      topBg:
        "http://175.178.92.128:8087/campus_help_system/images/insidePages/20190910163919740.jpg",
      initData: {},
      commentList: [],
      commentText: "",
      isOneId: null,
      isTowId: null,
      oneCommentText: "",
      towCommentText: "",
    };
  },
  created() {
    this.getByIdLearnDatum();
    this.getByIdCommentList();
  },
  mounted() {},
  methods: {
    // 获取当前数据
    async getByIdLearnDatum() {
      let { data: res } = await getByIdLearnDatum({
        id: this.$route.params.id,
      });
      this.initData = res.data;
    },
    // 获取全部评论
    async getByIdCommentList() {
      let { data: res } = await getByIdCommentList({
        id: this.$route.params.id,
      });
      this.commentList = res.data;
    },
    // 页面评论
    async getAddComment() {
      if (
        window.localStorage.getItem("id") == "" ||
        window.localStorage.getItem("id") == null
      ) {
        return this.$message.error("请先登录");
      }

      if (this.commentText == "" || this.commentText == null) {
        return this.$message.error("请填写留言数据");
      }

      let data = {
        forumId: this.$route.params.id,
        userName: "",
        comment: "",
        userImages: "",
      };
      data.userName = window.localStorage.getItem("userName");
      data.comment = this.commentText;
      data.userImages = window.localStorage.getItem("images");
      let { data: res } = await getAddComment(data);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      this.commentText = "";
      this.getByIdCommentList();
    },
    // 点击一级评论
    clickOneCom(e) {
      this.isOneId = e.id;
      this.isTowId = null;
      this.oneCommentText = "";
    },
    // 点击二级评论
    clickTowCom(e) {
      this.isTowId = e.id;
      this.isOneId = null;
      this.towCommentText = "";
    },
    // 点击一级确认按钮
    getAddOneComment(e) {
      if (
        window.localStorage.getItem("id") == "" ||
        window.localStorage.getItem("id") == null
      ) {
        return this.$message.error("请先登录");
      }
      if (this.oneCommentText == "" || this.oneCommentText == null) {
        return this.$message.error("评论为空，请输入评论");
      }
      let data = {
        commentId: e.id,
        userName: "",
        comment: "",
        userImages: "",
      };
      data.userName = window.localStorage.getItem("userName");
      data.comment = this.oneCommentText;
      data.userImages = window.localStorage.getItem("images");
      this.getAddcommentDtl(data);
    },
    // 点击二级确认按钮
    getAddTowComment(e) {
      if (
        window.localStorage.getItem("id") == "" ||
        window.localStorage.getItem("id") == null
      ) {
        return this.$message.error("请先登录");
      }
      if (this.towCommentText == "" || this.towCommentText == null) {
        return this.$message.error("评论为空，请输入评论");
      }
      let data = {
        commentId: e.id,
        userName: "",
        comment: "",
        userImages: "",
      };
      data.userName = window.localStorage.getItem("userName");
      data.comment = this.towCommentText;
      data.userImages = window.localStorage.getItem("images");
      this.getAddcommentDtl(data);
    },
    // 点击评论请求
    async getAddcommentDtl(e) {
      let { data: res } = await getAddcommentDtl(e);
      if (res.status != 2000) {
        return this.$message.error(res.msg);
      }
      this.$message.success(res.msg);
      this.isTowId = null;
      this.oneCommentText = "";
      this.isOneId = null;
      this.towCommentText = "";
      this.getByIdCommentList();
    },
    // 判断文件格式
    getFileFormatFromPath(filePath) {
      const parts = filePath.split(".");
      if (parts.length > 1) {
        return parts[parts.length - 1];
      } else {
        return null;
      }
    },
    // 提取文件名字
    extractFileNameFromUrl(url) {
      return url.split("/").pop();
    },
    // 下载文件
    clickDownload(e) {
      window.open(e, "_blank");
    },
  },
};
</script>
<style lang="less" scoped>
.resourceSharing {
  .top_img {
    height: 280px;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center center;
    display: flex;
    align-items: center;
    justify-content: center;
    & > span {
      font-size: 48px;
      font-weight: 700;
      color: #fff;
    }
  }
  .main {
    padding: 50px 0;
    margin: 0 auto;
    width: 1200px;
    .col_title {
      text-align: center;
      font-size: 28px;
      margin-bottom: 24px;
    }
    .col_time {
      text-align: center;
      font-size: 14px;
      color: #999;
    }
    .video_box {
      margin: 24px 0;
      width: 100%;
    }
    .tc {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .col_com {
      .com_text {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 12px;
      }
      .com_box {
        margin-bottom: 24px;
        .btn {
          margin-top: 12px;
          // text-align: right;
        }

        .com_main {
          & > ul {
            & > li {
              display: flex;
              margin-bottom: 12px;
              padding-bottom: 12px;
              border-bottom: 1px solid #eee;
              .left {
                padding: 24px 12px;
                width: 190px;
                background-color: #fbfbfd;
                text-align: center;
                .img_box,
                .name_box {
                  margin-bottom: 12px;
                }
                .time_box {
                  font-size: 14px;
                }
              }
              .right {
                padding: 24px 12px;
                background-color: #fff;
                margin-left: 18px;
                flex: 1;
                .one_com {
                  min-height: 190px;
                }
                .one_btn {
                  text-align: right;
                  font-size: 14px;
                  & > span {
                    color: #0e3782;
                    cursor: pointer;
                    border-bottom: 1px solid #0e3782;
                  }
                  .com_text_box {
                    margin-top: 24px;
                  }
                }
                & > ul {
                  margin-top: 12px;
                  & > li {
                    margin-bottom: 24px;
                    background-color: #f7f8fa;
                    padding: 12px;
                    .text_box {
                      display: flex;
                      .img_box {
                        width: 60px;
                        margin-right: 12px;
                      }
                      .name_box {
                        margin-right: 12px;
                      }
                      .content_box {
                        flex: 1;
                      }
                    }
                    .time_box {
                      text-align: right;
                      font-size: 12px;
                      & > span {
                        color: #0e3782;
                        cursor: pointer;
                        border-bottom: 1px solid #0e3782;
                        margin-left: 12px;
                      }
                    }
                    .com_text_box {
                      margin-top: 12px;
                      text-align: right;
                    }
                  }
                  & > li:last-child {
                    margin-bottom: 0;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
